<template>
  <div class="page-container">
    <!-- 设备状态概览 -->
    <a-row :gutter="16">
      <a-col :span="12" v-for="stat in statistics" :key="stat.title">
        <a-card class="stat-card" :bodyStyle="{ padding: '16px' }">
          <div class="stat-content">
            <component :is="stat.icon" class="stat-icon" :class="stat.type" />
            <div class="stat-info">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-title">{{ stat.title }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 设备运行状态 -->
    <a-card class="status-card">
      <template #title>
        <div class="card-header">
          <span>设备运行状态</span>
          <a-radio-group v-model:value="timeRange" size="small">
            <a-radio-button value="day">今日</a-radio-button>
            <a-radio-button value="week">本周</a-radio-button>
            <a-radio-button value="month">本月</a-radio-button>
          </a-radio-group>
        </div>
      </template>
      <div class="chart-container">
        <v-chart class="chart" :option="statusChartOption" autoresize />
      </div>
    </a-card>

    <!-- 设备列表 -->
    <a-card class="equipment-card">
      <template #title>
        <div class="card-header">
          <span>设备列表</span>
          <a-space>
            <a-input-search
              v-model:value="searchText"
              placeholder="搜索设备"
              style="width: 200px"
              @search="onSearch"
            />
            <a-button type="primary">添加设备</a-button>
          </a-space>
        </div>
      </template>
      <a-table
        :dataSource="equipmentList"
        :columns="columns"
        :pagination="{ pageSize: 5 }"
        :loading="loading"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ record.status }}
            </a-tag>
          </template>
          <template v-if="column.key === 'health'">
            <a-progress
              :percent="record.health"
              :status="getHealthStatus(record.health)"
            />
          </template>
          <template v-if="column.key === 'action'">
            <a-space>
              <a-button type="link" @click="showDetails(record)">详情</a-button>
              <a-button type="link" @click="showMaintenance(record)">维护</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 维护记录 -->
    <a-card class="maintenance-card">
      <template #title>最近维护记录</template>
      <a-timeline>
        <a-timeline-item
          v-for="record in maintenanceRecords"
          :key="record.id"
          :color="record.type === 'regular' ? 'blue' : 'red'"
        >
          <template #dot>
            <component :is="record.icon" />
          </template>
          <div class="maintenance-item">
            <div class="maintenance-header">
              <span class="maintenance-title">{{ record.title }}</span>
              <span class="maintenance-time">{{ record.time }}</span>
            </div>
            <div class="maintenance-content">
              <div class="maintenance-equipment">{{ record.equipment }}</div>
              <div class="maintenance-desc">{{ record.description }}</div>
            </div>
          </div>
        </a-timeline-item>
      </a-timeline>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent,
  MarkLineComponent,
  MarkPointComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import {
  DashboardOutlined,
  AlertOutlined,
  ToolOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  WarningOutlined,
  SearchOutlined,
  PlusOutlined,
  HistoryOutlined,
  ToolFilled
} from '@ant-design/icons-vue'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent,
  MarkLineComponent,
  MarkPointComponent
])

// 统计数据
const statistics = ref([
  {
    title: '设备总数',
    value: '30',
    icon: DashboardOutlined,
    type: 'primary'
  },
  {
    title: '运行中',
    value: '24',
    icon: CheckCircleOutlined,
    type: 'success'
  },
  {
    title: '待维护',
    value: '3',
    icon: ToolOutlined,
    type: 'warning'
  },
  {
    title: '故障',
    value: '1',
    icon: AlertOutlined,
    type: 'error'
  }
])

// 时间范围选择
const timeRange = ref('day')

// 设备运行状态图表配置
const statusChartOption = ref({
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      let result = params[0].axisValue + '<br/>'
      params.forEach(param => {
        const color = param.color
        const value = param.value
        const seriesName = param.seriesName
        result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`
        result += `${seriesName}: ${value}小时<br/>`
      })
      return result
    }
  },
  legend: {
    data: ['运行时间', '停机时间', '维护时间', '计划维护']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
  },
  yAxis: {
    type: 'value',
    name: '小时'
  },
  series: [
    {
      name: '运行时间',
      type: 'line',
      smooth: true,
      data: [2, 2, 0, 2, 2, 2, 2],
      markPoint: {
        data: [
          { type: 'max', name: '最长运行' },
          { type: 'min', name: '最短运行' }
        ]
      }
    },
    {
      name: '停机时间',
      type: 'line',
      smooth: true,
      data: [0, 0, 1, 0, 0, 0, 0]
    },
    {
      name: '维护时间',
      type: 'line',
      smooth: true,
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: '计划维护',
      type: 'line',
      data: [0, 0, 0, 0, 0, 0, 0],
      lineStyle: {
        type: 'dashed'
      }
    }
  ]
})

// 表格列定义
const columns = [
  {
    title: '设备名称',
    dataIndex: 'name',
    key: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name)
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    filters: [
      { text: '运行中', value: '运行中' },
      { text: '待机', value: '待机' },
      { text: '维护中', value: '维护中' },
      { text: '故障', value: '故障' }
    ],
    onFilter: (value, record) => record.status === value
  },
  {
    title: '健康度',
    dataIndex: 'health',
    key: 'health',
    sorter: (a, b) => a.health - b.health
  },
  {
    title: '最后维护',
    dataIndex: 'lastMaintenance',
    key: 'lastMaintenance',
    sorter: (a, b) => new Date(a.lastMaintenance) - new Date(b.lastMaintenance)
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 200
  }
]

// 设备列表数据
const equipmentList = ref([
  {
    key: '1',
    name: 'CNC-001',
    status: '运行中',
    health: 95,
    lastMaintenance: '2024-02-15'
  },
  {
    key: '2',
    name: 'CNC-002',
    status: '运行中',
    health: 88,
    lastMaintenance: '2024-02-18'
  },
  {
    key: '3',
    name: 'CNC-003',
    status: '维护中',
    health: 75,
    lastMaintenance: '2024-02-20'
  },
  {
    key: '4',
    name: 'CNC-004',
    status: '待机',
    health: 92,
    lastMaintenance: '2024-02-19'
  },
  {
    key: '5',
    name: 'CNC-005',
    status: '故障',
    health: 45,
    lastMaintenance: '2024-02-20'
  }
])

// 维护记录
const maintenanceRecords = ref([
  {
    id: 1,
    title: '定期维护',
    type: 'regular',
    equipment: 'CNC-003',
    description: '更换润滑油，检查传动系统',
    time: '10分钟前',
    icon: ToolFilled
  },
  {
    id: 2,
    title: '故障维修',
    type: 'emergency',
    equipment: 'CNC-005',
    description: '主轴电机过热，更换散热风扇',
    time: '1小时前',
    icon: WarningOutlined
  },
  {
    id: 3,
    title: '预防性维护',
    type: 'regular',
    equipment: 'CNC-001',
    description: '校准加工精度，更新控制程序',
    time: '2小时前',
    icon: ToolFilled
  }
])

// 搜索和加载状态
const searchText = ref('')
const loading = ref(false)

// 获取状态颜色
const getStatusColor = (status) => {
  const colors = {
    '运行中': 'success',
    '待机': 'default',
    '维护中': 'processing',
    '故障': 'error'
  }
  return colors[status] || 'default'
}

// 获取健康状态
const getHealthStatus = (health) => {
  if (health >= 90) return 'success'
  if (health >= 70) return 'normal'
  return 'exception'
}

// 搜索处理
const onSearch = (value) => {
  loading.value = true
  // 模拟搜索延迟
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// 显示设备详情
const showDetails = (record) => {
  console.log('显示设备详情:', record)
}

// 显示维护界面
const showMaintenance = (record) => {
  console.log('显示维护界面:', record)
}

// 模拟数据更新
onMounted(() => {
  // 这里可以添加实际的数据获取逻辑
})
</script>

<style lang="less" scoped>
.stat-cards {
  margin-bottom: 16px;
}

.stat-card {
  margin-bottom: 16px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  font-size: 24px;
  margin-right: 12px;
  padding: 8px;
  border-radius: 8px;
  
  &.primary {
    color: #1890ff;
    background-color: rgba(24, 144, 255, 0.1);
  }
  
  &.success {
    color: #52c41a;
    background-color: rgba(82, 196, 26, 0.1);
  }
  
  &.warning {
    color: #faad14;
    background-color: rgba(250, 173, 20, 0.1);
  }
  
  &.error {
    color: #ff4d4f;
    background-color: rgba(255, 77, 79, 0.1);
  }
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
}

.stat-title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.status-card,
.equipment-card,
.maintenance-card {
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
}

.chart {
  height: 100%;
}

.maintenance-item {
  .maintenance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .maintenance-title {
    font-weight: bold;
  }

  .maintenance-time {
    color: rgba(0, 0, 0, 0.45);
    font-size: 12px;
  }

  .maintenance-content {
    .maintenance-equipment {
      color: #1890ff;
      margin-bottom: 4px;
    }

    .maintenance-desc {
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
</style> 